<ion-content>
    <ion-icon (click)="nav.back()" style="position: absolute;top:50px;left: 20px;font-size: 24px;width: 24px;height: 24px;" name="close"></ion-icon>

    <ion-card style="margin-top: 25%;padding-bottom: 30px;">
        <ion-card-header>
            <ion-card-header>
                <ion-card-title style="text-align: center">
                    登录
                </ion-card-title>
            </ion-card-header>
        </ion-card-header>
        <ion-card-content>
            <!--用户名密码登录-->
            <ion-item *ngIf="loginMethod==0" style="padding:0 25px 0 10px">
                <ion-input type="text" placeholder="输入用户名" [(ngModel)]="username"></ion-input>
            </ion-item>
            <ion-item *ngIf="loginMethod==0" style="padding:0 25px 0 10px">
                <ion-input type="password" placeholder="输入密码" [clearInput]="true" [(ngModel)]="password"></ion-input>
            </ion-item>

            <!--手机验证码登录-->
            <ion-item *ngIf="loginMethod==1" style="padding:0 25px 0 10px">
                <ion-label>+86</ion-label>
                <ion-input placeholder="输入手机号" [type]="'tel'" [maxlength]="11" [clearInput]="true"></ion-input>
            </ion-item>
            <ion-item *ngIf="loginMethod==1" style="padding:0 25px 0 10px">
                <ion-input placeholder="输入验证码"  [type]="'tel'" [maxlength]="6"></ion-input>
                <ion-button fill="outline" slot="end">获取验证码</ion-button>
            </ion-item>

            <div style=" margin-top: 20px;padding:0 20px">
                <ion-button
                            expand="block" (click)="login()">登录
                </ion-button>
            </div>

        </ion-card-content>
    </ion-card>
    <div style="bottom: 20px; width: 100%;text-align: center;">
    <a *ngIf="loginMethod==0" (click)="loginMethod=1">手机验证码登录</a>
    <a *ngIf="loginMethod==1" (click)="loginMethod=0">用户名密码登录</a>
    </div>
</ion-content>
